<!doctype html>
<html lang="en">
<head>
    <title>Grid - Band</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="wijgrid provides bands" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../base-reset.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/Aristo/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css"/>
    <link href="../demos-single.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.wijmo-open.0.8.2.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/wijmo/jquery.ui.wijgrid.css" rel="stylesheet" type="text/css" />

    <script src="../../external/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.glob.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.mousewheel.min.js" type="text/javascript"></script>

    <script src="../../external/jquery.wijmo-open.0.8.2.min.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijdatasource.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijgrid.js" type="text/javascript"></script>

    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#demo").wijgrid({
              allowSorting: true,
              allowKeyboardNavigation: true,
              selectionMode: "singleCell",
              columns: [
                {}, // id
                {}, // company
                {
                  headerText: "Additional information",
                  columns: [
                    {
                      headerText: "Contact",
                      columns: [
                        {}, // name
                        {} // title
                      ]
                    },
                    {
                      headerText: "Regional information",
                      columns: [
                        {
                          headerText: "Address information",
                          columns: [
                            {}, // address
                            {}, // city
                            {}, // country
                            {} // postal code
                          ]
                        },
                        {
                          headerText: "Communication",
                          columns: [
                            {}, // phone
                            {} // fax
                          ]
                        }
                      ]
                    }
                  ]	
                }
              ]
            });
        });
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
               Bands</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <table id="demo">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Company</th>
                  <th>Name</th>
                  <th>Title</th>
                  <th>Address</th>
                  <th>City</th>
                  <th>Country</th>
                  <th>PostalCode</th>
                  <th>Phone</th><th>Fax</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>ALFKI</td><td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Sales Representative</td><td>Obere Str. 57</td><td>Berlin</td><td>Germany</td><td>12209</td><td>030-0074321</td><td>030-0076545</td>
                </tr>
                <tr>
                  <td>ANATR</td><td>Ana Trujillo Emparedados y helados</td><td>Ana Trujillo</td><td>Owner</td><td>Avda. de la Constitucion 2222</td><td>Mexico D.F.</td><td>Mexico</td><td>05021</td><td>(5) 555-4729</td><td>(5) 555-3745</td>
                </tr>
                <tr>
                  <td>ANTON</td><td>Antonio Moreno Taqueria</td><td>Antonio Moreno</td><td>Owner</td><td>Mataderos 2312</td><td>Mexico D.F.</td><td>Mexico</td><td>05023</td><td>(5) 555-3932</td><td> </td>
                </tr>
                <tr>
                  <td>AROUT</td><td>Around the Horn</td><td>Thomas Hardy</td><td>Sales Representative</td><td>120 Hanover Sq.</td><td>London</td><td>UK</td><td>WA1 1DP</td><td>(171) 555-7788</td><td>(171) 555-6750</td>
                </tr>
                <tr>
                  <td>BERGS</td><td>Berglunds snabbkop</td><td>Christina Berglund</td><td>Order Administrator</td><td>Berguvsvagen 8</td><td>Lulea</td><td>Sweden</td><td>S-958 22</td><td>0921-12 34 65</td><td>0921-12 34 67</td>
                </tr>
              </tbody>
            </table>
            <!-- End demo markup -->
            <div class="demo-options">
            <!-- Begin options markup -->
                
            <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
            </p>
        </div>
    </div>
</body>
</html>
